<?php require_once(dirname(__FILE__).'/../inc/config.inc.php');IsModelPriv('member');

?>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>中泓高科综合管理系统 数据大屏</title>
	<link rel="stylesheet" href="css/style.css" />
	<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=IYNBZ-YNYWG-IE6QE-IQPNJ-J3HKV-BVBTX"></script>
    <style>
     body{ max-height:1080px !important; overflow:hidden !important;}
 </style>
</head>
<body>
	<header>
		中泓高科综合管理系统 数据统计
		<span id=localtime style=" font-size:14px; position: absolute; right: 30px; top:-20px; "></span>
	</header>
	<div id="content">
		<div class="content_left">
			<div class="dtuplc">
				<div class="current-num">
					<div>系统任务数量</div>
					<p> {{ datas.count.all }}</p>
				</div>

			</div>
				<!--
                	DTU和PLC完
                -->
                <div class="online">
                	<div class="title"><img src="images/icon01.png" width="28" /> 服务设备类型</div>
                	<div class="online_con" id="container2">
                		
                	</div>
                </div>
                <div class="industry">
                	<div class="title"><img src="images/star.png"  /> 服务星级</div>
                	<div class="industry_con" id="guzhang"></div>
                </div>
            </div>
            <div class="content_center">
            	<div class="center_top">
            		<div class="center_top_con" id="distribution_map">
            		</div>
            	</div>
            	<div class="center_bot">
            		<table class="panel-table"bordercolor="#0d48e0" border="1">
            			<thead bgcolor="#0e4ae0" align="center" >
            				<tr height="40">
            					<th colspan="6"><img src="images/icon04.png" /> 报修列表</th>
            				</tr>
            			</thead>
            			<tbody>
            				<tr class="aaa" align="center">
            					<td  style="color: #00fcff; font-size: 18px; padding: 5px 0;">区域</td>
            					<td  style="color: #00fcff; font-size: 18px; padding: 5px 0;">单位</td>
            					<td  style="color: #00fcff; font-size: 18px; padding: 5px 0;">联系人</td>
            					<td  style="color: #00fcff; font-size: 18px; padding: 5px 0;">故障</td>
            					<td  style="color: #00fcff; font-size: 18px; padding: 5px 0;">进度</td>
            					<td  style="color: #00fcff; font-size: 18px; padding: 5px 0;">操作</td>
            				</tr>
            				<tr v-for="y in datas.order" class="aaa" style="font-size: 16px;" align="center" >
            					<td>{{ y.area }}</td>
            					<td>{{ y.school }}</td>
            					<td>{{ y.truename }}</td>
            					<td>{{ y.content }}</td>
            					<td>{{ y.jindu }}</td>
            					<td><button class="btn-success"  @click='showgongdan(y.id)' :data-id='y.id'>点击查看</button></td>
            				</tr>
            			</tbody>
            		</table>
            	</div>
            </div>
            <div class="content_right">
            	<div class="report">
            		<div class="report1">
            			<p>等待受理</p>
            			<small> {{ datas.count.waiting }}条</small>
            		</div>
            		<div class="report2">
            			<p style="color:green">受理中</p>
            			<small> {{ datas.count.doing }} 条</small>
            		</div>
            	</div>
            	<div class="news_report">
            		<div class="title"><img src="images/icon05.png" /> 报修完成率</div>
            		<div class="news_list" id="wanchenglv">

            		</div>
            	</div>
            	<div class="data_box">
            		<div class="title"><img src="images/icon06.png" /> 每日任务次数</div>
            		<div class="data_con" id="jilu">
            		</div>
            	</div>
            </div>
        </div>
        <!--遮罩层-->


        <!-- Morris Charts CSS -->
        <link href="../ui/css/plugins/morris.css" rel="stylesheet">
        <script type="text/javascript" src="js/jquery.min.js"></script>		
        <script type="text/javascript" src="js/echarts.min.js"></script>
        <script type="text/javascript" src="js/china.js"></script>
        <script type="text/javascript" src="js/vue.min.js"></script>
        <script type="text/javascript" src="js/times.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <!-- Morris Charts JavaScript --> 
        <script src="../ui/js/plugins/morris/raphael.min.js"></script> 
        <script src="../ui/js/plugins/morris/morris.min.js"></script>        
        <script type="text/javascript" src="../layer/layer.js"></script>
        <script type="text/javascript">
            $(function() {
             center = new qq.maps.LatLng(32.976950,114.037510);
             map = new qq.maps.Map(document.getElementById("distribution_map"), {
              center: center,
              zoom: 13,
          });

             Marker = qq.maps.Marker;
             LatLng = qq.maps.LatLng;
             var MarkerImage = qq.maps.MarkerImage;
             var MarkerShape = qq.maps.MarkerShape;
             var MarkerAnimation = qq.maps.MarkerAnimation;
             Point = qq.maps.Point;
             var Size = qq.maps.Size;
             var ALIGN = qq.maps.ALIGN;
             var MVCArray = qq.maps.MVCArray;
             var MarkerCluster = qq.maps.MarkerCluster;
             var Cluster = qq.maps.Cluster;
             MarkerDecoration = qq.maps.MarkerDecoration;
             latlngs = [];

             markers = new MVCArray();
             var markerCluster;
             markerClusterer = new MarkerCluster({
                map:map,
                    minimumClusterSize:2, //默认2
                    markers:markers,
                    zoomOnClick:true, //默认为true
                    gridSize:30, //默认60
                    averageCenter:true, //默认false
                    maxZoom:18, //默认18
                });
         })

            var vm = new Vue({
              el: '#content',
              data: {
               datas:{
                count:{all:0,doing:5,waiting:0,working:99},
                order:[],
                map:[]
            },
            timer: null
        },
        methods: {
            setTimer: function () {
                console.log('开始定时...111')
                if(this.timer == null) {
                 this.timer = setInterval( () => {
                    console.log('开始定时...每过3秒执行一次')
                    $.ajax({
                       type: 'POST',
                       url: "data.php",
                       data:{time:Date.parse(new Date())},
                       dataType: 'JSON',
                       success: function (result) {
                        console.log(result);
                        if (result.errno == 0) {
                         vm.datas=result.data;
                         console.log(vm.datas);
                         vm.$forceUpdate();
                         getData();
                     }
                 }
             })
                }, 3000)
             }
         }
     },
     created: function() {
       console.log('开始定时...000')
				            //this.getFamilyBase_info()
				            // 每次进入界面时，先清除之前的所有定时器，然后启动新的定时器
				            clearInterval(this.timer)
				            this.timer = null
				            this.setTimer()
				        },
				        destroyed: function () {
				            // 每次离开当前界面时，清除定时器
				            clearInterval(this.timer)
				            this.timer = null
				        }

				    })




//加载数据
function getData(){	
	/*map*/
 var anchor = new qq.maps.Point(6, 6),
 size = new qq.maps.Size(32, 32),
 origin = new qq.maps.Point(0, 0);
 var map_data = vm.datas.map;

 console.log(map_data);
 console.log(map);
 for(var i = 0; i < map_data.length; i++) {
    var data_pos=map_data[i].latlngs;
    console.log(data_pos);
    var latLng = eval(new qq.maps.LatLng(map_data[i].lat,map_data[i].lng));
    //var latLng = new LatLng(33.006170,114.015880);
     console.log(latLng);
    var marker = new qq.maps.Marker({
        position: latLng,
        map: map,
        icon: new qq.maps.MarkerImage('img/'+map_data[i].jindu+'.gif', size, origin, anchor)
    });
}


}


    /*
	var worldMapContainer1 = document.getElementById('distribution_map');
	var myChart = echarts.init(worldMapContainer1);
	var option = {
		tooltip: {
			trigger: 'item'
		},
		legend: {
			orient: 'vertical',
			x: 'left',
			y: 'bottom',
			data: [
			'已安装设备'
			],
			textStyle: {
				color: '#ccc'
			}
		},
		visualMap: {
			min: 0,
			max: 2500,
			left: 'right',
			top: 'bottom',
				text: ['高', '低'], // 文本，默认为数值文本
				calculable: true,
				//		color: ['#26cfe4', '#f2b600', '#ec5845'],
				textStyle: {
					color: '#fff'
				}
			},
			series: [{
				name: '签到地点',
				type: 'map',
				aspectScale: 0.75,
				zoom: 1.2,
				mapType: '河南',
				roam: false,
				label: {
					normal: {
                            show: true,//显示省份标签
                            textStyle:{color:"#c71585"}//省份标签字体颜色
                        },    
                        emphasis: {//对应的鼠标悬浮效果
                        	show: true,
                        	textStyle:{color:"#800080"}
                        } 
                    },
                    itemStyle: {
                    	normal: {
                            borderWidth: .5,//区域边框宽度
                            borderColor: '#009fe8',//区域边框颜色
                            areaColor:"#ffffff",//区域颜色
                        },
                        emphasis: {
                        	borderWidth: .5,
                        	borderColor: '#4b0082',
                        	areaColor:"#ffdead",
                        }
                    },
                    data: function() {
                    	var serie = [];
                    	for(var i = 0; i < vm.datas.map.length; i++) {
                    		var item = {
                    			name: vm.datas.map[i].area,
                    			value: vm.datas.map[i].cnt
                    		};
                    		serie.push(item);
                    	}
                    	return serie;
                    }()

                }
                ]
            };

            myChart.setOption(option);

		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
		myChart.on('click', function (params) {//点击事件
			if (params.componentType === 'series') {
			}
		})


		/*map*/


    </script>

</body>
</html>
